import { useSearchParam } from "shared/hooks";
import { AnimatePresence, m } from "framer-motion";
import { useAtom } from "jotai";
import { customPromptAtom, isUseCustomPromptAtom } from "@/store/customPrompt";

export default function CustomPrompt() {
  const isShowCustomPrompt = useSearchParam("prompt") === "1";
  const [useCustomPrompt, setUseCustomPrompt] = useAtom(isUseCustomPromptAtom);
  const [prompt, setPrompt] = useAtom(customPromptAtom);
  if (!isShowCustomPrompt) {
    return null;
  }

  return (
    <>
      <button
        className="border-none bg-none text-xs text-blue-500 outline-none hover:text-blue-600"
        onClick={() => setUseCustomPrompt(!useCustomPrompt)}
      >
        自定义 Prompt
      </button>
      <AnimatePresence>
        {useCustomPrompt && (
          <m.div
            initial={{ height: 0 }}
            animate={{ height: 100 }}
            exit={{ height: 0 }}
            className="overflow-hidden"
          >
            <div className="size-full overflow-hidden rounded border border-zinc-300">
              <textarea
                className="block size-full resize-none px-2 py-1 text-sm leading-none outline-none"
                value={prompt}
                onInput={(e) =>
                  setPrompt((e.target as HTMLTextAreaElement).value)
                }
              ></textarea>
            </div>
          </m.div>
        )}
      </AnimatePresence>
    </>
  );
}
